<template>
  <section v-loading="loading">
    <el-form label-width="80px" inline style="border: 0px solid red">
      <el-form-item label="" style="border: 0px solid red;">
        <el-row style="display: flex;flex-direction: row;width: 100%">
          <filter-tool class="filtertool" type="saleTypeId" test="name" v-on:confirm="filterEvent"></filter-tool>
        </el-row>
      </el-form-item>
      <el-form-item label="" style="border: 0px solid red;">
        <search-tool v-on:search="searchProductEvent"></search-tool>
      </el-form-item>
      <el-form-item label="" style="border: 0px solid red;float: right">
        <el-button size="mini" @click="addSaleDialogBtn" type="primary" icon="el-icon-plus"/>
      </el-form-item>
    </el-form>
    <el-table :data="saleList">
      <el-table-column type="index" label="序号"/>
      <el-table-column label="名称" prop="title"/>
      <el-table-column label="类型" prop="saleType.name"/>
      <el-table-column label="开始" prop="start" :formatter="formatDatetime"/>
      <el-table-column label="结束" prop="end" :formatter="formatDatetime"/>
      <el-table-column label="操作" width="180px">
        <template slot-scope="scope">
          <el-button size="mini" @click="editBtn(scope.row)" type="primary">编辑</el-button>
          <el-button size="mini" @click="deleteBtn(scope.row.id)" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-show="totalPage>0" style="margin-top:10px;" small layout="prev, pager, next" :page-count="totalPage" @current-change="goPage"/>
    <el-dialog :visible.sync="editSaleDialog" :title="currSale.id?'编辑':'新建'" width="60%" v-if="currSale">
      <new-sale :sale="currSale" v-on:closeDialog="getSaleList"></new-sale>
    </el-dialog>
  </section>
</template>

<script>
  import searchTool from '@/common/searchTool'
  import filterTool from '@/common/filterTool'
  import newSale from './newSale'
  import dateFormater from '@/common/date-formater'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import errHandler from '@/assets/errHandler.js'
  export default {
    name: "saleList",
    components: {newSale,filterTool,searchTool},
    data() {
      return {
        loading:false,
        editSaleDialog:false,
        saleList:null,
        totalPage:0,
        currSale:null,
        filterObj:{}
      }
    },
    created(){
      this.loading=true
      this.getSaleList()
    },
    watch:{
    },
    computed:{
      ...mapGetters(['department']),
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      getSaleList(pageNo,filterObj){
        this.fetch({name:"getSaleList",data:{page:pageNo?pageNo:0,departmentId:this.department.id,...filterObj}})
          .then(res=>{
            console.log(res)
            this.saleList=res.content
            this.totalPage=res.totalPages
            this.loading=false
            this.editSaleDialog=false
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      editBtn(row){
        console.log(row)
        this.currSale=row
        this.editSaleDialog=true
      },
      deleteBtn(id){
        this.loading=true
        this.$confirm('确认删除？')
          .then(()=> {
            this.fetch({name:"delSale",data:{id}})
              .then(res=>{
                console.log(res)
                this.getSaleList()
              })
              .catch(err=>{
                console.log(err)
                errHandler.handle(this,err)
              })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
            this.loading = false
          })
      },
      formatDatetime(a,b,date,d){
        console.log(date)
        return dateFormater.formatDatetime(date)
      },
      goPage(val){
        this.getSaleList(val-1)
      },
      addSaleDialogBtn(){
        this.currSale=null
        this.editSaleDialog=true
      },
      filterEvent(e,objK){
        for(let key in e){
          if(objK === undefined) this.filterObj[key]=e[key]
          else this.filterObj[objK]=e[key]
        }
        let tmp={}
        for(let k in this.filterObj){
          if(this.filterObj[k] !== undefined){
            tmp[k]=this.filterObj[k]
          }
        }
        this.getSaleList(0,tmp)
      },
      searchProductEvent(e){
        this.filterObj.key=e
        this.getSaleList(0,this.filterObj)
      },
    }
  }
</script>

<style scoped>
  .icon{
    margin-left:43%;
    margin-top:10px;
    width:5%;
    height:5%;
    color: seagreen
  }
</style>
